<template>
  <div class="czxjg-c" >
    <div class="czxjg-cca">
      <div class="czxjg-c-a" :style="{ 'background-color': getColor(index) }">
        {{ info.name }}
      </div>

      <div class="czxjg-c-aa">
        <div class="czxjg-c-aaa">南华期货股份有限公司苏州营业部</div>

        <div class="czxjg-c-b">
          <div class="czxjg-c-bb">存续</div>
          <div class="czxjg-c-bbb">房屋建筑业</div>
        </div>
        <div class="czxjg-c-d">
          <div class="czxjg-c-dd">李楠</div>
          <div class="czxjg-c-ddd">1500万元</div>
          <div class="czxjg-c-dddd">2015-11-20</div>
        </div>
      </div>
    </div>
    <div class="czxjg-d">
      <img src="../../../assets/images/dianhua (1).png" alt="" class="czxjg-dd" />
      <div class="czxjg-ddd">{{ info.tell }}</div>
    </div>
    <div class="czxjg-e">
      <img src="../../../assets/images/dianhua (2).png" alt="" class="czxjg-ee" />
      <div class="czxjg-eee">
        {{ info.address }}
      </div>
    </div>
    <div class="czxjg-ee"></div>
  </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {
        info:{
            type:Object,
        },
        name:{
            type:String,
         },
         index:{
            type:Number,
         }
    },
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
          
        };
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() { },
    mounted() {

    },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        getColor(index){
      const colors = ["red", "blue", "green", "yellow", "purple"];
      return colors[index % colors.length];
    },
    }
};
</script>

<style scoped lang="scss">
 .czxjg-c {
    height: 176px;
    overflow: hidden;
    .czxjg-cca {
      display: flex;
      margin: 14px 0 0 9px;
      .czxjg-c-a {
        width: 37px;
        height: 37px;
        background: #d99d9a;
        // background: #d99d9a !important;
        border-radius: 4px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 13px;
        color: #ffffff;
        line-height: 18px;
        text-align: center;
      }

      .czxjg-ca {
        background: #d99d9a;
      }
      .czxjg-caa {
        background: #74a8e7;
      }
      .czxjg-caaa {
        background: #cca5d5;
      }

      .czxjg-c-aa {
        margin-left: 6px;
        .czxjg-c-aaa {
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          font-size: 18px;
          color: #000000;
          line-height: 20px;
        }
        .czxjg-c-b {
          display: flex;
          margin-top: 7px;
          .czxjg-c-bb {
            background: rgba(227, 242, 237, 0.2);
            border-radius: 2px;
            border: 1px solid #3f9f71;
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            font-size: 12px;
            color: #3f9f71;
            text-align: center;
            line-height: 21px;
            width: 42px;
            height: 21px;
          }
          .czxjg-c-bbb {
            width: 76px;
            height: 21px;
            background: #e4efff;
            border-radius: 2px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 12px;
            color: #3282e4;
            margin-left: 7px;
            text-align: center;
            line-height: 21px;
          }
        }
        .czxjg-c-d {
          display: flex;
          margin-top: 9px;
          align-items: center;
          .czxjg-c-dd {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 14px;
            color: #2c2c2c;
          }
          .czxjg-c-ddd {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 14px;
            color: #989898;
            margin-left: 21px;
          }
          .czxjg-c-dddd {
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            font-size: 14px;
            color: #989898;

            margin-left: 21px;
          }
        }
      }
    }
    .czxjg-d {
      display: flex;
      margin: 5px 0 0 9px;
      align-items: center;
      .czxjg-dd {
        width: 11px;
        height: 13px;
      }
      .czxjg-ddd {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 15px;
        color: #3282e4;
        margin-left: 5px;
      }
    }
    .czxjg-e {
      display: flex;
      margin: 5px 0 0 9px;
      align-items: center;
      .czxjg-ee {
        width: 11px;
        height: 13px;
      }
      .czxjg-eee {
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 15px;
        color: #3282e4;
        margin-left: 5px;
      }
    }
    .czxjg-ee {
      margin-top: 9px;

      height: 9px;
      background: #f3f3f3;
    }
  }






</style>
